<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>修改个人资料</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap-theme.min.css" rel="stylesheet">
    <!-- LESS for CSS file -->
    <link href="css/css/index.css" rel="stylesheet" type="text/css">
    <link href="css/css/top_bar.css" rel="stylesheet" type="text/css">

  </head>
  <body>
    <div class="container-fluid">
      <div class="row" id="top_bar">
        <div class="fixed_div">  <!-- fixed_div -->
          <div class="webTitle">
            <a href="/index.html">
              <img src="image/art_logo.png">
            </a>
          </div>
          <div class="search">
            <img src="image/search.png">
            <input type="text" placeholder="搜索画室、标签">
          </div>
          <div class="switch-pages">
            <a href="/index.html"><span class="top_btn active">首页</span></a>
            <a href="/Q&A.html"><span class="top_btn">问答</span></a>
            <a href="/gallery.html"><span class="top_btn">资料</span></a>
          </div>
          <div class="operation-btns">
            <span class="log_reg" data-toggle="modal" data-target="#logModal">登录</span>
            <span class="log_reg" data-toggle="modal" data-target="#regModal">注册</span>
            <div class="user">
              <div class="avatar_userName">
                <a href="/Info.html">
                  <div class="log_avatar">
                    <img src="image/emptyAvatar.jpg"> 
                  </div>  
                  <span class="userName">name</span>
                </a> 
              </div>

              <div class="hidden_first">
                <div class="triangle"></div>  
                <div class="user-list">
                  <div class="updateInfo" data-toggle="modal" data-target="#updateInfoModal">
                    <a href="/updateUserInfo.html">修改资料</a>
                  </div>   
                  <div class="changePass" data-toggle="modal" data-target="#changePassModal">修改密码</div>
                  <div class="quit">退出</div>
                </div>
              </div>
            </div>
          </div> 
        </div>
      </div>


      <!-- 中心信息框 -->
      <div class="row">
        <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1"></div> 
        <div class="update-user-info col-lg-7 col-md-7 col-sm-7 col-xs-7">
          <!-- 返还首页 -->
          <div class="return_home">
            <h1>修改个人资料</h1>
            <a href="/Info.html">返回个人主页</a>
          </div>
          <div class="updateAvatar">
            <h1>头像</h1>
            <div class="avatarCotainer">
              <img src="image/emptyAvatar.jpg">
            </div>
            <div class="select-button">
              <img id="avatar_chooseImg" src="image/chooseAvatar.png">
              <h3>支持JPG,PNG格式，请不要超过2M</h3>
              <button id="avatar_uploadImg" class="btn btn-primary btn-sm">上传</button>
                    <form id="avatar_hidden_form" enctype="multipart/form-data" action="/msq/api/image" method="POST" target="avatar_hidden_iframe">
                      <input type="file" name="image"/> 
                      <input type="text" name="userId"/>
                      <input type="submit"/>
                      <iframe name="avatar_hidden_iframe" id="avatar_hidden_iframe"></iframe>
                    </form>
            </div>
          </div>
          <div class="updateInfo">
            <div class="name">
              <h1>名字</h1>
              <input type="text" id="updateName" placeholder="输入用户名"/>
            </div>
            <div class="gender">
              <h1>性别</h1>
              <div class="male">
                <span>男</span> 
                <img src="image/check1.png">
              </div>
              <div class="female">
                <span>女</span> 
                <img src="image/check1.png">
              </div>
              <!-- 隐藏单选按钮 -->
              <input type="radio" name="updateGender" value="1">
              <input type="radio" name="updateGender" value="0">
              <!-- <input type="radio" name="updateGender" value="2" checked> -->
            </div>
            <div class="area">
              <h1>地区</h1>
              <input type="text" id="updateProvince" placeholder="输入省份"/><span>省</span>
              <input type="text" id="updateCity" placeholder="输入城市"/><span>市</span>
            </div>
            <div class="grade">
              <h1>身份</h1>
              <select id="updateGrade">
                <option value=0>初中</option>
                <option value=1>高一</option>
                <option value=2>高二</option>
                <option value=3>高三</option>
                <option value=4>大学</option>
                <option value=5>业余</option>
              </select>
            </div>
            <div class="school">
              <h1>学校</h1>
              <input type="text" id="updateSchool" placeholder="输入学校"/>
            </div>
            <div class="phone">
              <h1>电话</h1>
              <input type="text" id="updatePhone" placeholder="输入电话"/>
            </div>
          </div>
          <div class="submit-div">
            <img src="image/modify.png">
          </div>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
        </div>
      </div>

      <!-- logModal -->
      <div class="modal fade" id="logModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

        <div class="modal-dialog">
          <div class="modal-content">
            <div class="closeModal" data-dismiss="modal">
              <img src="image/CLOSE.png">
            </div>
            <div class="input-line">
              <img src="image/email.png" class="account-img">
              <input type="text" id="logAccount" placeholder="输入账号"/>
            </div>
            <div class="error"></div>
            <div class="input-line">
              <img src="image/lock.png" class="password-img">
              <input type="password" id="logPassword" placeholder="输入密码"/>
            </div>           
            <div class="error"></div>

            <div class="submit-holder">
              <img class="main-submit" src="image/login.png">
            </div>
            <div class="other_login">
              <img src="image/weibo.jpg">
              <span>其它登录：</span>
            </div>
          </div>
        </div>        
      </div>

      <!-- regModal -->
      <div class="modal fade" id="regModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="closeModal" data-dismiss="modal">
              <img src="image/CLOSE.png">
            </div>

            <div class="input-line">
              <div class="labels">
                <span>手机号码</span>
              </div>
              <input type="text" id="regPhone" class="short" placeholder="输入手机号码"/>
              <img class="getCode" src="image/getCode.png">
            </div>
            <div class="error"></div>
            <div class="input-line">
              <div class="labels">
                <span>验证码</span>
              </div>
              <input type="text" id="regCode" placeholder="输入手机验证码"/>
            </div>
            <div class="error"></div>
            <div class="input-line">
              <div class="labels">
                <span>密码</span>
              </div>
              <input type="password" id="regPassword" placeholder="输入密码"/>
            </div>           
            <div class="error"></div>
            <div class="input-line">
              <div class="labels">
                <span>密码</span>
              </div>
              <input type="password" id="regPassword2" placeholder="再次输入密码"/>
            </div>           
            <div class="error"></div>
            <div class="submit-holder">
              <img class="main-submit" src="image/reg.png">
            </div>
          </div>
        </div>        
      </div>

      <!-- changePassModal -->
      <div class="modal fade" id="changePassModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

        <div class="modal-dialog">
          <div class="modal-content">

            <div class="input-line">
              <input type="password" id="oldPassword" placeholder="输入旧密码"/>
            </div>
            <div class="error"></div>
            <div class="input-line">
              <input type="password" id="changePassword1" placeholder="输入新密码"/>
            </div>           
            <div class="error"></div>
            <div class="input-line">
              <input type="password" id="changePassword2" placeholder="确认新密码"/>
            </div>           
            <div class="error"></div>

            <div class="submit-holder">
              <img class="quit" src="image/cancel.png" data-dismiss="modal">
              <img class="main-submit" src="image/confirm.png">
            </div>
          </div>
        </div>        
      </div>
      
    </div>


    <!-- main javascript entrance -->
    <script src="js/tools/require.js" data-main="js/updateUserInfo"></script>
      <div class="footer">
        <div class="footerContent">
          <ul class="footerList">
            <li><a href="#">关于我们</a></li>
            <li><a href="#">联系我们</a></li>
            <li><a href="#">广告业务</a></li>
          </ul>
          <p class="icp">京备123号</p>
          <h2>美术帮</h2>
        </div>
      </div>
  </body>
</html>